<template>
  <div
    class="mx-auto w-layout-xl-screen flex flex-col"
    :class="{ 'pointer-events-none': showInfoDialog }"
  >
    <Head>
      <Title>Контакты</Title>
    </Head>
    <TemplateHeader />
    <AtomEnvBanner
      v-if="
        config.public.envLabel && config.public.envLabel !== 'PROD_CONTACTS'
      "
    />
    <AtomNotification v-if="notificationActive" :text="notificationText" />
    <MoleculeContactDetailDialog v-if="showInfoDialog" />
    <div class="mx-auto w-layout-xl-screen">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useNotificationStore } from '~/stores/notificationStore'
import { useUserManagerStore } from '~/stores/userManagerStore'
import { useUserStore } from '~/stores/userStore'
const route = useRoute()
const showInfoDialog = ref(false)
const userManagerStore = useUserManagerStore()
const userStore = useUserStore()
const notificationStore = useNotificationStore()
const config = useRuntimeConfig()

const { notificationText, notificationActive } = storeToRefs(notificationStore)

watchEffect(() => {
  if (route.query.contactId) {
    showInfoDialog.value = true
  } else {
    showInfoDialog.value = false
  }
})

onBeforeMount(() => {
  if (userManagerStore.user?.access_token) {
    userStore.getMe()
  }
})
</script>

<style scoped></style>
